<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>层次选择器示例</title>
    <style type="text/css">
    input{
        margin: 5px;
    }
    .input{
        font-size:  12pt;
        color: #333333;
        background-color: #cef;
        border:  1px solid #000000;
    }
    </style>
    <script src="C:\Users\86198\Desktop\yl-dsj\jquery-3.6.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#change").click(function(){  //绑定“换肤”按钮的单击事件
            $("form > input").addClass("input"); //为表单元素的直接子元素input添加样式
        });
        $("#default").click(function(){   //绑定“恢复默认”按钮的单击事件
            $("form > input").removeClass("input");  //移除直接子元素input添加的样式
        });
    
    });
    </script>
</head>
<body>
    <form action="" id="form1" name="form1" method="post">
        姓&nbsp;&nbsp; 名：<input type="text" name="name" id="name"/>
        籍&nbsp;&nbsp; 贯: <input type="text" name="native" id="native"/>
        生&nbsp;&nbsp; 日: <input type="text" name="birthday" id="birthday"/>
        E-mail: <input type="text" name="email" id="email"/>
        <br/>
        <span></span>
    </form>
</body>
</html>